<template>
	<div class="resalerecord">
		<van-collapse v-model="activeNames">
			<van-collapse-item title="转售记录" name="1">
				<div>
					<div class="collapse-head">
						<span>转售中：{{reordObj.sellingNum}}头</span>
						<span>已转售：{{reordObj.sellOutNum}}头</span>
						<span>剩余数量：{{reordObj.savesNum}}头</span>
					</div>
					<ul class="purchase-order-list">
						<li v-for="(item, index) in recordData" :key="index" @click="toResaleTab3End(item)">
							<p class="order-code">订单编号：{{item.outTradeNo}}</p>
							<div class="order-content">
								<div class="order-img">
									<img :src="item.smallPic" alt="">
								</div>
								<div class="order-text">
									<p class="pro-name">{{item.productName}}({{item.farmName}}）</p>
									<p class="pro-address"><span>养殖地：{{item.originProvince}}</span><span>牧场：{{item.farmName}}</span></p>
									<p class="pro-weight"><span>重量：{{item.productWeight}}{{item.productWeightUnit}}</span><span>单价：{{item.salePrice}}{{item.salesPriceUnit}}</span></p>
									<p class="pro-price"><span class="pro-c"><i>{{item.totalPrice}}</i>{{item.totalPriceUnit}}</span></p>
								</div>
							</div>
							<div class="pro-dete"><span>养殖期：<i>{{item.timeLimit}}{{item.timeType}}</i></span><span>剩余交货期：<i>{{item.deliveryTime}}</i>个月</span></div>
							<div class="pro-acount" v-if="item.resaleCategory == 2"><span>转售数量：{{item.resaleQuantity}}头</span><span class="resaleing">转售中</span></div>
							<div v-if="item.resaleCategory == 3">
								<div class="pro-acount"><span>转售数量：{{item.resaleQuantity}}头</span><span class="resaleing">已转售</span></div>
								<div class="pro-acount pro-acount-time">
									<span class="time">转售时间：{{item.resaleTime}}</span>
								</div>
								<div class="pro-acount resale-money">
									转售金额：{{item.payMoney}}元
								</div>
							</div>
							
						</li>
					</ul>
				</div>
			</van-collapse-item>
		</van-collapse>
	</div>
</template>

<script>
	import Vue from 'vue';
	import { Collapse, CollapseItem } from 'vant';

	Vue.use(Collapse).use(CollapseItem);
	export default {
		props: {
			recordData: Array,
			reordObj: Object
		},
		created(){
			
		},
		data() {
			return {
				activeNames: ['1'],
				end: '已转售',
				
			};
		},
		methods: {
			// 转售完详情
			toResaleTab3End(item){
				if(item.resaleCategory == 2){  //转售中
					// 如果 状态为1，跳下架页面，
					let idData = {
						productId: item.productId,  //  通过这id获取商品详情接口 /api/product/detail/{product_id}
						resaleId: item.resaleId    // 下单的id
					}
					if(item.state == 1){
						console.log(item)
						this.$router.push({
							path: '/my/resale/resaleshelves/' + idData.productId,
							query: { item: JSON.stringify(idData) }
						})
					} else {
						
						// 去到上架页面
						this.$store.commit('totalWeight', item.productWeight)
						this.$store.commit('totalPrice', item.totalPrice)
						this.$router.push({
							path: '/my/resale/resaleshelvesup/' + item.resaleId,
							query: { item: JSON.stringify(idData) }
						})
						
					}
				} else if(item.resaleCategory == 3){  //已转售
					this.$router.push({
						path: '/my/resale/resaletab3end/' + item.resaleId
					})
				}
				
			}
		}
	};
</script>

<style>
	.resalerecord .van-collapse-item__content {
		padding: 0;
		background-color: #f8f8f8;
		border-top: 1px solid #F2F2F2;
	}
</style>

<style lang="scss" scoped>
	.pro-acount-time{
		color: #969C9E;
		font-size: 12px;
		border-top: 1px solid #f2f2f2;
	}
	.resale-money{
		color: #5D6164;
		font-size: 14px;
		display: flex;
		justify-content: flex-end !important;
	}
	.collapse-head {
		width: 100%;
		height: 54px;
		line-height: 54px;
		display: flex;
		justify-content: space-around;
		background-color: #fff;

		span {
			color: #344047;
		}
	}

	.purchase-order-list {
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 10px;

		padding: 0 16px;

		li {
			margin-top: 10px;
			background-color: #fff;
			border-radius: 8px;
			padding: 16px 12px;
			padding-bottom: 0;

			.order-code {
				color: #344047;
				font-size: 16px;
				margin-bottom: 16px;
			}

			.order-content {
				display: flex;

				.order-img {
					width: 80px;
					height: 80px;

					img {
						width: 100%;
						height: 100%;
						border-radius: 8px;
					}
				}

				.order-text {
					flex: 1;
					padding-left: 12px;

					.pro-name {
						color: #344047;
						font-size: 16px;
						margin-bottom: 6px;
					}

					.pro-address {
						display: flex;
						justify-content: space-between;
						color: #969C9E;
						font-size: 12px;
						margin-bottom: 4px;
					}

					.pro-weight {
						display: flex;
						justify-content: space-between;
						color: #969C9E;
						font-size: 12px;
						margin-bottom: 8px;
					}

					.pro-price {
						display: flex;
						justify-content: flex-end;
						margin-bottom: 21px;

						.pro-c {
							color: #969C9E;
							font-size: 12px;

							i {
								color: #F58523;
								font-size: 16px;
								margin-right: 7px;
								font-weight: 500;
							}
						}
					}

				}

			}

			.pro-dete {
				width: 100%;
				height: 34px;
				line-height: 34px;
				display: flex;
				justify-content: space-between;
				border-top: 1px solid #f2f2f2;
				border-bottom: 1px solid #f2f2f2;

				span {
					font-size: 12px;
					color: #969C9E;

					i {
						color: #31BC8D;
					}
				}
			}

			.pro-acount {
				width: 100%;
				height: 44px;
				line-height: 44px;
				display: flex;
				justify-content: space-between;

				span {
					color: #5D6164;
				}

				.resaleing {
					color: #31BC8D;
				}
			}

			.pro-btn {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.order-status-btn {
					width: 88px;
					height: 34px;
					line-height: 34px;
					color: #fff;
					float: right;
					margin-top: 12px;
				}
			}
		}
	}
</style>
